<!--
 * @Description:
 * @version: 签字界面
 * @Author: 潘骏杰
 * @Date: 2022-03-29 08:03:57
 * @LastEditors: 潘骏杰
 * @LastEditTime: 2022-04-01 09:55:03
-->
<template>
  <div class="re">
    <HeaderNav />
    <div class="text mrbody" style="font-size: 16px; padding: 10px">
      <div
        ref="canvasBox"
        style="padding: 10px; height: 600px; border: 1px solid #ddd"
      >
        <canvas class="canvasId" />
        <div class="btnBox">
          <van-button
            style="width: 100%"
            round
            type="primary"
            plan
            @click="clear"
          >重签</van-button>
        </div>
      </div>
    </div>
    <van-submit-bar
      button-text="提交"
      button-color="#4A90E2"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import HeaderNav from '@/components/headerNav/index'
import SignaturePad from 'signature_pad'
export default {
  name: 'Autograph',
  // import引入的组件需要注入到对象中才能使用
  components: { HeaderNav },
  data() {
    // 这里存放数据
    return {
      loading: false,
      active: 0,
      showCardNumber: false,
      submiting: false,
      searchvalue: '',
      SignaturePad: null,
      config: {
        penColor: '#000000', // 笔刷颜色
        minWidth: 3 // 最小宽度
      },
      base64Mg: undefined
    }
  },
  mounted() {
    this.getCanvas()
  },
  methods: {
    getCanvas() {
      var canvas = document.querySelector('.canvasId')
      this.signaturePad = new SignaturePad(canvas, this.config)
      canvas.height = 600
      canvas.width = this.$refs.canvasBox.clientWidth
    },
    // 保存
    onSubmit() {
      // 默认保存为png格式
      // console.log(this.signaturePad.toDataURL())
      // console.log(this.signaturePad.toDataURL('image/jpeg'))
      // console.log(this.signaturePad.toDataURL('image/svg+xml'))
      // console.log(this.signaturePad.isEmpty())  //判断画布有没有内容,布尔型
      if (this.signaturePad.isEmpty()) {
        this.$toast({ type: 'fail', message: '电子签名不能为空' })
      } else {
        console.log(this.signaturePad.toDataURL())
        this.base64Mg = this.signaturePad.toDataURL()
        this.$toast.success('成功')
        this.$router.go(-3) // 返回家医
      }
    },
    // 清除
    clear() {
      // 清除画布内容
      this.signaturePad.clear()
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .van-hairline--bottom::after {
  display: none !important;
}
.van-submit-bar__button {
  width: 100% !important;
}
.btnBox {
  position: fixed;
  left: 15px;
  bottom: 60px;
  z-index: 20;
  width: calc(100% - 30px);
}
.btnBox .van-button {
  /* width: 100%; */
}
.li-right h3 span {
  float: right;
  margin-top: -5px;
}
.li-right p {
  width: 100%;
}
.li-right p,
.li-right h3 span {
  font-size: 14px;
}
.search-btn {
  padding-top: 12px;
}
</style>
